<template>
  <div class="container">
    <div class="app-container">
      <div class="right">
        <div class="top">
          <h4>作业范围分配</h4>
          <el-button v-if="isEdit" size="mini" style="padding-left: 25px;padding-right: 25px;border-radius: 5px;" type="danger" @click="isEdit=false">编辑</el-button>
          <div v-if="!isEdit">
            <el-button size="mini" style="padding-left: 25px;padding-right: 25px;border-radius: 5px;" type="danger" @click="$message.error('很抱歉演示数据不允许修改')">提交</el-button>
            <el-button size="mini" style="padding-left: 25px;padding-right: 25px;border-radius: 5px;" @click="isEdit=true;isDraw=true">取消</el-button>
          </div>
        </div>
        <div class="map">
          <div class="inp">
            <span>地区关键词：</span>
            <el-input v-model="searchKeyword" placeholder="请输入地区关键字" style="width: 300px;margin-left: 6px;" />
          </div>
          <el-alert
            v-if="!mapParams.polygon&&isEdit"
            :closable="false"
            :title="'当前'+$route.params.name+'下暂无作业范围'"
            center
            type="warning"
            show-icon
            style="margin: 5px 0 10px;"
          />
          <div v-if="!isEdit" class="hd">
            <el-button v-if="isDraw" size="mini" type="danger" @click="isDraw=false">开始绘制</el-button>
            <div v-else>
              <el-button size="mini" type="danger" @click="isDraw=true">完成绘制</el-button>
              <el-button size="mini" plain @click="clear">删除围栏</el-button>
            </div>
            <el-alert
              :closable="false"
              title="点击或拖动鼠标绘制作业范围，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。每个机构仅可支持绘制一个作业范围"
              type="warning"
              show-icon
              style="margin: 5px 0;"
            />
            <!--  -->
          </div>
          <!-- 地图组件 -->
          <Map :map-params="mapParams" :search-keyword="searchKeyword" :is-draw="isDraw" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getFreightList } from '@/utils/institutions'
import Map from './components/map.vue'
export default {
  name: 'Social',
  components: {
    Map
  },
  data() {
    return {
      isEdit: true,
      isDraw: true,
      mapParams: {},
      searchKeyword: ''
    }
  },
  created() {
    this.onTree()
  },
  methods: {
    async onTree() {
      const res = await getFreightList(this.$route.params.id, 2)
      console.log(res.data)
      this.mapParams = res.data
    },
    clear() {
      this.$message.error('系统数据不允许修改')
      this.isDraw = true
    }

  }
}
</script>
  <style scoped>
  .app-container{
    /* height: 800px; */
    display: flex;
    justify-content: space-between;
    background-color: #f4f6f8;
  }
  .left{
    width: 220px;
    margin-right: 20px;
    padding: 10px;
    background-color: #fff;
  }
  .right{
    flex: 1;
    background-color: #fff;
  }
  .top{
    height: 60px;
    background-color: #f8faff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 30px;
  }
  .map{
    padding:0 20px 20px ;
  }
  .inp{
    height: 80px;
    display: flex;
    align-items: center;
  }
  .app-container{
    /* height: 840px; */
  }

  </style>

